<template>
	<ul class="context-menu-container">
		<li @click="onRefreshClick">{{ $t('msg.tagsView.refresh') }}</li>
		<li @click="onCloseRightClick"> {{ $t('msg.tagsView.closeRight') }}</li>
		<li @click="onCloseOtherClick">{{ $t('msg.tagsView.closeOther') }}</li>
	</ul>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	import {
		useStore
	} from 'vuex'

	const props = defineProps({
		index: {
			type: Number,
			required: true
		}
	})

	const router = useRouter()
	const onRefreshClick = () => {
		router.go(0)
	}

	const store = useStore()
	const onCloseRightClick = () => {
		store.commit('app/removeTagsView', {
			type: 'right',
			index: props.index
		})
	}

	const onCloseOtherClick = () => {
		store.commit('app/removeTagsView', {
			type: 'other',
			index: props.index
		})
	}
</script>

<style lang="scss" scoped>
	.context-menu-container {
		position: fixed;
		background: #fff;
		z-index: 3000;
		list-style-type: none;
		padding: 5px 0;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #333;
		box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

		li {
			margin: 0;
			padding: 7px 16px;
			cursor: pointer;

			&:hover {
				background: #eee;
			}
		}
	}
</style>
